/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="areaOptimize">
    <el-container>
      <el-aside width="180px">
        <AreaPlanMenu :planData="planData"
        :areaId="areaId"
        :zIndexObj="zIndexObj"
        :loading="loading"
        @maskChange="maskChange"
        @chooseRoute="chooseRoute"
        @resetContentComponent="resetContentComponent"
        @refresh="getAllPlan"/>
      </el-aside>
      <el-main style="border: 0px solid black;">
        <AreaPlanContent v-if="reset"
        ref="planContent"
        :schemeData="schemeData"
        :step="step"
        :zIndexObj="zIndexObj"
        :chooseId="chooseId"
        @onRouteChange="onRouteChange"
        @resetContentComponent="resetContentComponent"/>
      </el-main>
      <div></div>
    </el-container>
  </div>
</template>

<script>
import AreaPlanMenu from './planMenu'
import AreaPlanContent from './planContent'
export default {
  name: 'GreenWaveOptimize',
  components: {
    AreaPlanMenu,
    AreaPlanContent
  },
  props: {
    areaId: {
      type: Number
    }
  },
  watch: {
    areaId: {
      handler: function (val) {
        if (val && val > 0) {
          this.maskVisible = true
          // 模拟一次手动点击，触发tip显示
          this.$refs.editbtn.click()
        }
      }
    }
  },
  data () {
    return {
      route: {},
      isolate: [],
      planData: [],
      schemeData: [],
      step: false, // 控制第二个蒙层是否可以显示
      zIndexObj: {
        // 由于“新增”“编辑”均有蒙层，因此需动态改变可点击按钮层级
        addZIndex: 98,
        editZIndex: 98
      },
      reset: false,
      activeName: 'first',
      chooseId: 0, // 选中的计划id
      loading: false
    }
  },
  methods: {
    maskChange (val) {
      // 控制两个蒙层下按钮的层级关系，并判断第二个蒙层显示的时机
      if (val) {
        this.step = false
        this.zIndexObj = {
          addZIndex: 99,
          editZIndex: 96
        }
      } else {
        this.step = true
        this.zIndexObj = {
          addZIndex: 96,
          editZIndex: 99
        }
      }
    },
    resetContentComponent () {
      // 每次切换侧边栏方案时，重置销毁planContent组件
      this.reset = false
      this.$nextTick(() => {
        this.reset = true
        this.$nextTick(() => {
          this.setPlanChart()
        })
      })
    },
    setPlanChart () {
      let planchart = this.$refs.planContent
      let route
      let routeIndex
      for (let i = 0; i < this.routeData.length; i++) {
        let item = this.routeData[i]
        if (item.id === this.chooseId) {
          route = item
          routeIndex = i
          break
        }
      }
      this.route = route
      this.routeIndex = routeIndex
      this.greenwave = this.route.greenwave ? this.route.greenwave : this.greenwave
      planchart.onPlanChart(route, this.patternList, this.greenwave, this.phaseList)
    },
    onPlanChart (routeData, patternList, greenwave, phaseList) {
      this.planData = routeData
      this.routeData = routeData
      this.patternList = patternList
      this.greenwave = greenwave
      this.phaseList = phaseList
      let planchart = this.$refs.planContent
      if (planchart) {
        this.maskVisible = true
        this.setPlanChart()
      }
    },
    getAllPlan () {
      this.$emit('onRouteChange', this.planData)
    },
    onRouteChange (newPatternList) {
      this.route.devs = newPatternList
      // console.log(this.route)
      // console.log(this.routeData)
    },
    chooseRoute (id) {
      this.chooseId = id
    }
  },
  created () {
  },
  mounted () {
    // this.getAllPlan()
  }
}
</script>

<style lang="scss" scoped>
</style>
